<template>
  <div class="page">
    <div class="page-body flex-column flex-center">
      <!---- 轮播图 ----->
      <div v-if="isNotEmpty(topBannerList)" class="banner-container flex-column">
        <a-carousel autoplay class="banner-list">
          <banner-card v-for="item in topBannerList" :key="item.id"
            :bannerId="''+item.id"
            :bannerTitle="item.title"
            :bannerImg="item.picUrl"
            :bannerUrl="item.url" />
        </a-carousel>
      </div>
      
      <!---- 直播录播 ----->
      <div v-if="isNotEmpty(liveList)" class="live">
        <div class="section-title flex-row">
          <div class="text">直播录播</div>
          <div class="more flex-row flex-center-end">
            <text-button label="查看全部" size="14" @click="navigateTo('/selected-content/lives')">
              <template #right>
                <CaretRightOutlined />
              </template>
            </text-button>
          </div>
        </div>
        <div class="live-list">
          <div class="big-live">
            <live-big-card
              :liveId="liveList[0].roomId"
              :liveTitle="liveList[0].title"
              :liveImg="liveList[0].imgPc"
              :liveUrl="liveList[0].roomUrl"
              :expertName="liveList[0].expertName"
              :expertPic="liveList[0].expertPic"
              :startTime="liveList[0].startTime"
              :viewNum="liveList[0].userNum"
              :status="liveList[0].status">
            </live-big-card>
          </div>
          <div class="line"></div>
          <div class="small-list">
            <template v-for="(item, index) in liveList" :key="index">
              <live-small-card v-if="index>0" class="course-info"
                :liveId="item.roomId"
                :liveTitle="item.title"
                :liveImg="item.imgPc"
                :liveUrl="item.roomUrl"
                :expertName="item.expertName"
                :expertPic="item.expertPic"
                :startTime="item.startTime"
                :viewNum="item.userNum"
                :status="item.status">
              </live-small-card>
            </template>
          </div>
        </div>
      </div>

      <!---- 推荐好课 ----->
      <div v-if="isNotEmpty(courseRecList)" class="selected flex-row">
        <div class="rec-list flex-column">
          <div class="section-title flex-row">
            <div class="text">推荐好课</div>
            <div class="more flex-row flex-center-end">
              <text-button label="查看全部" size="14" @click="navigateTo('/selected-content/courses')">
                <template #right>
                  <CaretRightOutlined />
                </template>
              </text-button>
            </div>
          </div>

          <a-flex wrap="wrap" gap="20" class="course-list">
            <div v-for="(item, index) in courseRecList" :key="item.courseId" class="course-info" :class="index>2 ? 'course-top' : ''">
              <course-rec-card
                :courseId="item.srcCourseId"
                :courseTitle="item.name"
                :courseImg="item.pic"
                :videoNum="item.videoNum"
                :curVideoNum="item.curVideoNum">
              </course-rec-card>
            </div>
          </a-flex>
        </div>
        <div class="space"></div>
        <div class="hot-list flex-column">
          <div class="section-title flex-row">
            <div class="icon">
              <img src="@/assets/images/hot.png" />
            </div>
            <div class="text">热门课程</div>
            <div class="more flex-row flex-center-end">
              <text-button label="换一换" size="14" @click="refreshHotCourses()">
                <template #left>
                  <SyncOutlined />
                </template>
              </text-button>
            </div>
          </div>

          <a-flex wrap="wrap" gap="27" class="course-list">
            <template v-for="(item, index) in courseHotList" :key="item.srcCourseId">
              <course-hot-card
                :courseId="item.srcCourseId"
                :courseTitle="item.name"
                :courseImg="item.pic"
                :videoNum="item.videoNum"
                :curVideoNum="item.curVideoNum">
              </course-hot-card>
              <div v-if="(index+1)<courseHotList.length" class="line"></div>
            </template>
          </a-flex>
        </div>
      </div>

      <!---- 广告条幅 ----->
      <div v-if="isNotEmpty(midBannerList)" class="ad-container" @mouseenter="showArrows = true" @mouseleave="showArrows = false">
        <a-carousel
          autoplay
          :autoplaySpeed="3000"
          :dots="false"
          :arrows="showArrows">
          <template #prevArrow>
            <div class="custom-slick-arrow" style="left: 20px; z-index: 1">
              <left-outlined />
            </div>
          </template>
          <template #nextArrow>
            <div class="custom-slick-arrow" style="right: 20px">
              <right-outlined />
            </div>
          </template>
          <!-- <div v-for="(item, index) in midBannerList" :key="index">
            <a :href="item.url" target="_blank">
              <img :src="item.picUrl" />
            </a>
          </div> -->
          <banner-card v-for="item in midBannerList" :key="item.id"
            :bannerId="''+item.id"
            :bannerTitle="item.title"
            :bannerImg="item.picUrl"
            :bannerUrl="item.url" />
        </a-carousel>
      </div>
      
      <!---- 热门资源 ----->
      <div v-if="isNotEmpty(materialList)" class="material">
        <div class="list-wrapper">
          <div class="section-title flex-row">
            <div class="text">热门资源</div>
            <div class="more flex-row flex-center-end">
              <text-button label="查看全部" size="14" @click="navigateTo('/selected-content/materials')">
                <template #right>
                  <CaretRightOutlined />
                </template>
              </text-button>
            </div>
          </div>
          <div class="list-container">
            <a-carousel
              v-if="isNotEmpty(docPkgList)"
              autoplay
              :autoplaySpeed="3000"
              class="material-pkgs">
              <div v-for="item in docPkgList" :key="item.documentsPkgId" class="material-image" :title="item.intro">
                <a :href="'/#/doc-pkg/index?id='+ item.documentsPkgId">
                  <img v-if="item.pic && item.pic.length > 0" :src="item.pic" />
                  <img v-else src="@/assets/images/docpkg.png" />
                </a>
                <div v-if="false" class="docpkg-text">{{ item.intro ? item.intro : '工具素材、配套教辅、资源仓库、独家电子教程满足仿真日常所需'}}</div>
              </div>
            </a-carousel>
            <div class="material-list">
              <div class="section-title flex-row">
                <div class="text">资料下载</div>
                <div class="more flex-row flex-center-end"></div>
              </div>
              <div class="list">
                <material-list-item v-for="item in materialList" :key="item.documentsId"
                  :title="item.name"
                  price="1299"
                  @onDownload="doDownload(item.documentsId, item.url)">
                </material-list-item>
              </div>
            </div>
          </div>
        </div>
        <!---- 广告条幅 ----->
        <transition-group v-if="isNotEmpty(siderBannerList)" name="adlist-swap" tag="div" class="ad-list">
          <banner-card v-for="item in siderBannerList" :key="item.id"
            :bannerId="''+item.id"
            :bannerTitle="item.title"
            :bannerImg="item.picUrl"
            :bannerUrl="item.url" />
        </transition-group>
      </div>
      
      <!---- 热门软件 ----->
      <div v-if="isNotEmpty(softwareList)" class="software">
        <div class="section-title flex-row">
          <div class="text">热门软件</div>
          <div class="more flex-row flex-center-end">
            <text-button label="查看全部" size="14" @click="navigateTo('/selected-content/softwares')">
              <template #right>
                <CaretRightOutlined />
              </template>
            </text-button>
          </div>
        </div>
        <div class="software-list">
          <software-card v-for="item in softwareList" :key="item.id" :softwareInfo="item"></software-card>
        </div>
      </div>

      <div class="space"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onBeforeUnmount } from 'vue';
import { CaretRightOutlined, SyncOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { useNavigation } from "@utils/navigation";
import BannerCard from '@components/BannerCard.vue';
import LiveBigCard from '@components/LiveBigCard.vue';
import LiveSmallCard from '@components/LiveSmallCard.vue';
import MaterialListItem from '@components/MaterialListItem.vue';
import CourseRecCard from '@components/CourseRecCard.vue';
import CourseHotCard from '@components/CourseHotCard.vue';
import SoftwareCard from '@components/SoftwareCard.vue';
import TextButton from '@components/TextButton.vue';
import useSelectedContentStore from "@/stores/selected-content";
import { downloadFile } from '@/utils/download'
import { isNotEmpty } from "@/utils";
import { miscApi } from "@/services";

const { navigateTo } = useNavigation();
const storeSelectedContent = useSelectedContentStore();

const topBannerList = ref([]);
const midBannerList = ref([]);
const siderBannerList = ref([]);
const liveList = ref([]);
const courseRecList = ref([]);
const courseHotList = ref([]);
const docPkgList = ref([]);
const materialList = ref([]);
const softwareList = ref([]);
const showArrows = ref(false);

let timerSwitchAd = null;
const switchImages = () => {
  // 小于等于2个图片时，不切换
  if (siderBannerList.value.length <= 2) {
    return;
  }

  siderBannerList.value = [...siderBannerList.value.reverse()];
};

onBeforeMount(async () => {
  await storeSelectedContent.initData();

  topBannerList.value = storeSelectedContent.topBannerListResult;
  midBannerList.value = storeSelectedContent.midBannerListResult;
  siderBannerList.value = storeSelectedContent.siderBannerListResult;
  liveList.value = storeSelectedContent.liveListResult;
  courseRecList.value = storeSelectedContent.courseRecListResult;
  courseHotList.value = storeSelectedContent.courseHotListResult;
  docPkgList.value = storeSelectedContent.docPkgListResult;
  materialList.value = storeSelectedContent.materialListResult;
  softwareList.value = storeSelectedContent.softwareListResult;

  if (isNotEmpty(siderBannerList.value)) {
    timerSwitchAd = setInterval(switchImages, 5000);
  }

  await miscApi.traceViewPage("/selected-content/list");
});

onBeforeUnmount(() => {
  if (timerSwitchAd!=null) {
    clearInterval(timerSwitchAd);
  }
});

const refreshHotCourses = async () => {
  await storeSelectedContent.getHotCourses();
  courseHotList.value = storeSelectedContent.courseHotListResult;
}

const doDownload = async (id: number, url:string) => {
  if (!url) {
    return;
  }

  try {
    const fileName = url.split('/').pop();
    await downloadFile({
      url: url,
      fileName: fileName // 可选自定义文件名‌:ml-citation{ref="6" data="citationList"}
    })

    if (id) {
      // 保存到我的资料
      await storeSelectedContent.addAsMyMaterial(id);
    }
  } catch (error) {
    console.error(`下载文件 ${url} 出现异常`, error);
  }
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  min-height: 100vh;

  .page-body {
    flex: 1;
    margin: 20px 30px;

    .banner-container {
      width: 100%;
      height: 290px;
      overflow: hidden;
      border-radius: 20px;

      .banner-list {
        width: 100%;
        height: 100%;

        :deep(.banner-card) {
          height: 290px;
        }
      }
    }

    .live {
      width: 100%;
      margin-top: 60px;
      display: flex;
      flex-direction: column;
      
      .live-list {
        width: 100%;
        height: 416px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        background: @white;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.06);
        border-radius: 20px;

        .big-live {
          width: 600px;
        }

        .line {
          width: 1px;
          height: 100%;
          background: @split-line-color;
        }

        .small-list {
          flex: 1;

          display: flex;
          flex-direction: column;
          background: @white;
          border-radius: 0 20px 20px 0;

          .live-small-card:first-child {
            border-radius: 0 20px 0 0;
          }

          .live-small-card:nth-child(6) {
            border-radius: 0 0 20px 0;
          }
        }
      }
    }

    .selected {
      width: 100%;
      margin-top: 60px;

      .rec-list {
        flex: 3;

        .course-list {
          margin-top: 20px;

          .course-info {
            width: calc(33.333333% - 13.333333px);
            height: 324px;
          }

          .course-top {
            margin-top: 8px;
          }

          :deep(.ant-tag) {
            border-radius: 12px;
            color: @font-grey;
          }
          :deep(.ant-tag-error) {
            border-radius: 12px;
            color: @font-red;
          }
        }
      }

      .space {
        width: 20px;
      }

      .hot-list {
        flex: 1;

        .course-list {
          margin-top: 20px;

          width: 100%;
          height: 676px;
          padding: 28px 20px;
          background: @white;
          box-shadow: 0px 2px 10px 0px @box-shadow-color;
          border-radius: 20px;

          .line {
            width: 100%;
            height: 1px;
            background: @split-line-color;
          }
        }

        :deep(.course-card) {
          width: calc(25% - 15px);
          height: 282px;
          padding: 10px;

          .pic {
            height: 200px;
          }

          .name {
            height: 56px;
            line-height: 22px;
            font-size: 16px;
            font-weight: 500;
            color: @font-black;
          }
        }
      }
    }

    .ad-container {
      width: 100%;
      height: 140px;
      margin-top: 60px;

      :deep(.slick-slide) {
        text-align: center;
        height: 140px;
        line-height: 140px;
        background: @font-grey;
        overflow: hidden;
      }

      :deep(.slick-arrow.custom-slick-arrow) {
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        color: @white;
        text-align: center;
        background-color: rgba(0,0,0,0.5);
        transition: ease all 0.3s;
        border-radius: 50%;
        z-index: 1;
      }
      :deep(.slick-arrow.custom-slick-arrow:before) {
        display: none;
      }
      :deep(.slick-arrow.custom-slick-arrow:hover) {
        color: @white;
        opacity: 1;
      }
    }

    .material {
      width: 100%;
      height: 384px;
      margin-top: 60px;
      display: flex;

      .list-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;

        .list-container {
          height: 340px;
          margin-top: 20px;
          display: flex;
          flex-direction: row;

          .material-pkgs {
            width: 370px;
            height: 100%;

            .material-image {
              width: 370px;
              height: 340px;
              position: relative;

              img {
                width: 100%;
                height: 100%;
                border-radius: 20px;
              }

              .docpkg-text {
                width: 340px;
                height: 44px;
                line-height: 22px;
                font-size: 16px;
                font-weight: 500;
                color: @font-grey;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                position: absolute;
                left: 20px;
                bottom: 25px;
              }
            }
          }
          
          .material-list {
            flex: 1;
            background-color: @white;
            margin-left: 20px;
            padding: 20px;
            border-radius: 20px;
            display: flex;
            flex-direction: column;

            .list {
              flex: 1;
              display: flex;
              flex-direction: column;
              margin-top: 20px;

              .material-list-item:not(:first-child) {
                margin-top: 24px;
              }
            }
          }
        }
      }

      .ad-list {
        width: 370px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;

        :deep(.banner-card), .ad-list-item {
          width: 100%;
          height: 186px;
          border-radius: 12px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 12px;
          }
        }

        :deep(.banner-card:not(:first-child)), .ad-list-item:not(:first-child) {
          margin-top: 12px;
        }

        // 列表交换动画
        .adlist-swap-enter-active,
        .adlist-swap-leave-active {
          transition: all 0.5s ease;
        }
        .adlist-swap-enter-from {
          opacity: 0;
          transform: translateY(30px);
        }
        .adlist-swap-leave-to {
          opacity: 0;
          transform: translateY(-30px);
        }
        .adlist-swap-move {
          transition: transform 0.5s ease;
        }
        /* 确保离开的元素立即脱离文档流 */
        .adlist-swap-leave-active {
          position: absolute;
          width: 100%;
        }
      }
    }

    .software {
      width: 100%;
      margin-top: 60px;

      .software-list {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        
        :deep(.software-card) {
          width: calc(20% - 16px);
        }
      }
    }

    .space {
      margin-top: 20px;
    }

    .section-title {
      height: 24px;
      display: flex;
      .icon {
        width: 24px;
        height: 24px;
        margin-right: 4px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        flex: 1;
        height: 24px;
        line-height: 24px;
        font-size: 20px;
        font-weight: 500;
        color: @font-black-dark;
      }
      .more {
        width: 30%;
        text-align: right;
      }
    }
  }

  :deep(.ant-carousel) {
    .slick-dots-bottom {
      bottom: 20px;
    }
    
    .slick-dots li {
      width: 6px;
      height: 6px;
      margin-inline: 3px;

      button {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: @white;
        opacity: 1;
      }

      &.slick-active{
        width: 24px;
        button {
          width: 24px;
          background: @red;
        }
      }
    }
  }
}
</style>
